<template>
  <div ref="chart" class="chart-render-box"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref, onBeforeUnmount, watch } from 'vue'
const props = defineProps({
  xData: {
    type: Array,
    default: () => [],
  },
  sData: {
    type: Array,
    default: () => [],
  },
  data1: {
    type: Array,
    default: () => [],
  },
  data2: {
    type: Array,
    default: () => [],
  },
  // 图例名字 要与 series 中 name 保持一致
  legendText: {
    type: Array,
    default: () => ['电动自行车总数', '核查清理数量'],
  },
  // data3: {
  //   type: Array,
  //   default: () => [],
  // },
  limit: {
    type: Array,
    default: () => [0, 4],
  },
  isLoop: {
    type: Boolean,
    default: true,
  },
  grid: {
    type: Object,
    default: () => ({
      top: '16%',
      left: '0%',
      right: '10%',
      bottom: '10%',
      containLabel: true,
    }),
  },
})
const [startValue, endValue] = props.limit
const option = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  grid: props.grid,
  legend: {
    // itemGap: 50,
    top: '1%',
    data: [...props.legendText],
    textStyle: {
      color: '#f9f9f9',
      borderColor: '#fff',
    },
  },
  // 控制显示几个柱子
  dataZoom: {
    show: false,
    startValue,
    endValue,
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: true,
      axisLine: {
        //坐标轴轴线相关设置。数学上的x轴
        show: false,
        lineStyle: {
          color: '#f9f9f9',
        },
      },
      axisLabel: {
        //坐标轴刻度标签的相关设置
        textStyle: {
          color: '#d1e6eb',
          margin: 15,
        },
      },
      axisTick: {
        show: false,
      },
      data: props.xData,
    },
  ],
  yAxis: [
    {
      name: '个',
      type: 'value',
      min: 0,
      // max: 140,
      splitNumber: 7,
      splitLine: {
        show: true,
        lineStyle: {
          color: '#0a3256',
        },
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        // margin: 20,
        textStyle: {
          color: 'rgb(148,159,167)',
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: 'rgba(108, 128, 151, 0.3)',
        },
      },
    },
  ],
  series: [
    {
      name: `${props.legendText[0]}`,
      type: 'bar',
      barWidth: 15,
      label: {
        show: true,
        position: 'top',
        textStyle: {
          color: '#fff',
        },
      },
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#15E0FF',
            },
            {
              offset: 1,
              color: '#159AFF',
            },
          ]),
        },
      },
      data: props.data1,
      yAxisIndex: 0,
    },
    {
      name: `${props.legendText[1]}`,
      type: 'bar',
      barWidth: 15,
      label: {
        show: true,
        position: 'top',
        textStyle: {
          color: '#fff',
        },
      },
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#15FFC5',
            },
            {
              offset: 1,
              color: '#15F7FF',
            },
          ]),
        },
      },
      data: props.data2,
      yAxisIndex: 0,
    },
  ],
})
function _clearInterval(timeId) {
  timeId && window.clearInterval(timeId)
}
const chart = ref()
let timer1 = null
const initCharts = () => {
  chart.value.removeAttribute('_echarts_instance_')
  const myChart = echarts.init(chart.value)
  myChart.setOption(option.value)
  window.addEventListener('resize', function () {
    // 在窗口尺寸变化时重新刷新图表
    myChart.resize()
  })
  if (props.isLoop) {
    timer1 = setInterval(() => {
      const item1 = props.data1.shift()
      props.data1.push(item1)
      const item2 = props.data2.shift()
      props.data2.push(item2)
      const item3 = props.xData.shift()
      props.xData.push(item3)
      myChart.setOption({
        series: [
          {
            data: props.data1,
            type: 'bar',
          },
          {
            data: props.data2,
            type: 'bar',
          },
        ],
        xAxis: {
          type: 'category',
          data: props.xData,
        },
      })
    }, 4000)
  }
}
// watch()
// () => props,
// (newValue, oldValue) => {
//   // console.log('@props',newValue);
//   // option.value.series[0].data = newValue
//   // initCharts()
// },
// { deep: true }
onMounted(() => {
  initCharts()
})
onBeforeUnmount(() => {
  if (props.isLoop) {
    _clearInterval(timer1.value)
  }
})
defineExpose({
  initCharts,
  props,
})
</script>
<style scoped lang="scss">
.chart-render-box {
  width: 100%;
  height: 100%;
  flex: 1;
}
</style>
